<template>
	<view class="acount-login-wrap full box relative p-safe">
		<view class="form-contaienr">
			<view class="app-logo">
				<image src="/static/k.svg" class="logo"></image>
			</view>
			<view class="form-wrap">
				<view class="form-item">
					<input class="input" type="text" placeholder="请输入账号" v-model="mobile" />
				</view>
				<view class="form-item">
					<input class="input" type="password" placeholder="请输入密码" v-model="password" />
				</view>
				<view class="form-item" v-if="isRegister">
					<input class="input" type="password" placeholder="请确认密码" v-model="confirmPassword" />
				</view>
				<view class="form-item" v-if="isRegister">
					<input class="input" type="text" placeholder="请输入邀请码(非必填)" v-model="inviteCode" />
				</view>
				<!-- <view class="form-item" v-if="isRegister">
					<input class="input" placeholder="请输入验证码" v-model="code" />
					<view class="sms-btn" @click="sendSms">
						<view class="text">
							<text>{{ codeTip }}</text>
						</view>
					</view>
				</view> -->
				<view class="button-wrap">
					<u-button :loading="loading" :text="btnTitle" @click="loginHandle" loadingMode="spinner"
						type="primary" />
				</view>
				<!-- 	<view class="forget-wrap" @click="resetPassword">
					<text>修改密码</text>
				</view> -->
			</view>
		</view>
		<u-code :seconds="seconds" change-text="Xs" ref="uCode" @change="codeChange"></u-code>
		<view class="footer-wrap">
			<u-checkbox-group>
				<u-checkbox @change="onChange" v-model="checked" shape="circle" />
			</u-checkbox-group>
			<view class="sercice">
				<text>登录即表示你同意隐私政策</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getTerminal } from '@/utils/tool.js'
	export default {
		onLoad(ev) {
			this.isRegister = ev.hasOwnProperty('type')
			if (this.isRegister) {
				this.btnTitle = '注册'
				uni.setNavigationBarTitle({
					title: '注册'
				})
			}
			const { platform } = this.sysInfoData
			const platformEnum = {
				ios: 5,
				android: 6
			}
			this.platform = platformEnum[platform]
		},
		methods: {
			resetPassword() {
				uni.navigateTo({
					url: '/pages/login/reset'
				})
			},
			onChange(ev) {
				this.checked = ev
			},
			codeChange(text) {
				this.codeTip = text
			},
			async sendSms() {
				const codeRef = this.$refs.uCode
				if (!codeRef || !codeRef.canGetCode) return
				const { mobile } = this
				if (!mobile.length) return this.$toast({ title: '请输入手机号' })
				if (!uni.$u.test.mobile(mobile)) return this.$toast({ title: '请输入正确的手机号' })
				uni.showLoading({
					title: '正在发送验证'
				})
				const resp = await this.$request({
					url: "/sms/sendCode",
					data: {
						mobile,
						scene: 'YZMDL'
					}
				})
				await this.$delay(200)
				const { code, msg } = resp
				uni.hideLoading()
				this.$toast({ title: msg })
				if (code !== 1) return
				this.$refs.uCode.start()
			},
			async loginHandle() {
				const payload = this.validate()
				if (!payload) return
				this.loading = true
				uni.showLoading({
					title: this.isRegister ? '正在注册' : '正在登录',
					mask: true,
				})
				const url = this.isRegister ? '/login/register' : '/login/account'
				const resp = await this.$request({
					url,
					data: payload,
				})
				await this.$delay(300)
				uni.hideLoading()
				const { code, data, msg } = resp
				if (!!msg) {
					this.$toast({ title: msg })
				}
				if (code !== 1) {
					this.loading = false
					return
				}
				if (this.isRegister) {
					return uni.redirectTo({
						url: '/pages/login/login'
					})
				}
				this.$store.commit('login', data.token)
				this.$store.dispatch('getUserinfo')
				this.$store.commit('location/setUpdate', true)
				// this.$store.dispatch('IM/initIM')
				this.$toast({ title: "登录成功" }, () => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				})
			},
			validate() {
				// if (!this.checked) return this.$toast({ title: '请勾选隐私政策' })
				const { mobile, password } = this
				if (!mobile.length) return this.$toast({ title: '请输入账号号' })
				// if (!uni.$u.test.mobile(mobile)) return this.$toast({ title: '请输入正确的手机号' })
				if (!password.length) return this.$toast({ title: '请输入密码' })
				const terminal = getTerminal()
				const payload = {
					account: mobile,
					scene: 1,
					password,
					// channel: this.platform || 5,
					terminal,
					channel: terminal,
				}
				if (!this.isRegister) {
					return payload
				}
				const { confirmPassword, code } = this
				if (!confirmPassword.length) return this.$toast({ title: '请再次输入密码' })
				if (password !== confirmPassword) return this.$toast({ title: '两次密码不一致' })
				// if (!code.length) return this.$toast({ title: '请输入验证码' })
				return {
					...payload,
					password_confirm: confirmPassword,
					// code,
					scene: 2,
					sn: this.inviteCode,
				}
			},
		},
		data() {
			return {
				isRegister: false,
				mobile: '17638237059',
				password: '',
				code: '',
				confirmPassword: '',
				checked: false,
				loading: false,
				seconds: 60,
				codeTip: '获取验证码',
				btnTitle: '登录',
				inviteCode: '',
			}
		}
	}
</script>

<style lang="scss" scoped>
	.acount-login-wrap {
		padding-top: 126rpx;


		.form-contaienr {
			display: flex;
			align-items: center;
			flex-flow: column;
			padding: 0 88rpx;
			box-sizing: border-box;

			.form-wrap {
				margin-top: 112rpx;
				width: 100%;

				.forget-wrap {
					margin-top: 42rpx;
					text-align: center;
					height: 44rpx;
					font-size: 28rpx;
					color: #4E5969;
					line-height: 44rpx;
				}

				.button-wrap {
					.button {
						height: 80rpx;
						background: #1D2129;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						color: #FFF;
						font-size: 28rpx;
						color: #FFFFFF;

						&.loading {
							opacity: .8;
						}
					}
				}

				.form-item {
					width: 100%;
					padding-bottom: 18rpx;
					box-sizing: border-box;
					border-bottom: 1px solid #C9CDD4;
					margin-bottom: 34rpx;
					display: flex;
					align-items: center;

					.sms-btn {
						width: 144rpx;
						height: 56rpx;
						box-sizing: border-box;
						border-radius: 72rpx 72rpx 72rpx 72rpx;
						border: 2rpx solid #C9CDD4;
						display: flex;
						align-items: center;
						justify-content: center;

						.text {
							font-size: 20rpx;
							color: #86909C;
						}
					}

					.input {
						flex: 1;
						height: 50rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #86909C;
					}
				}
			}

			.app-logo {
				width: 248rpx;
				height: 248rpx;
				background: #D9D9D9;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.logo {
					width: 70%;
					height: 70%;
				}
			}
		}

		.footer-wrap {
			position: absolute;
			bottom: 48rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			white-space: nowrap;

			.sercice {
				height: 44rpx;
				font-size: 28rpx;
				color: #1D2129;
				line-height: 44rpx;
			}
		}
	}
</style>